<template>
    <div class="homeList">
      <swiper>
        <swiper-slide v-for="(item,index) of pages" :key="index">
          <div class="icon"  >
            <div class="childIcon" v-for="citem of item " >
              <img :src="citem.imgUrl">
              <p>{{citem.title}}</p>
            </div>
          </div>
        </swiper-slide>

        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
    </div>
</template>

<script>
    export default {
      name: "homeList",
      data(){
         return {

         }
      },
       props:{
          list:Array
       },

       computed:{
         pages (){
           let pages=[]
           this.list.forEach((item,index)=>{
             const page=Math.floor(index/8)
             if(!pages[page]){
               pages[page]=[]
             }
             pages[page].push(item)
           })
           return pages
         }
       }
    }
</script>

<style scoped lang="stylus">
  .homeList >>>.swiper-container
    width 100%
    height 0
    padding-bottom 50%
  .icon
    width 100%
    display flex
    justify-content left
    flex-wrap wrap
    .childIcon
      width 25%
      text-align center
      margin-top .2rem
      img
        width 70%
        height auto
</style>
